<template>
  <div class="active-list" style='min-height: 4rem !important;'>
    <div class="header-wrapper" id="danmu">
      <img class="banner" :src="bannerUrl"/>
      <div class="ranking-list-warpper" @click="goRankingList" v-if="topshow === '1'">
        <span class="ranking-list-content">排行榜</span>
      </div>
    </div>
    <div class="content-wrapper">
      <div class="no-data-wrapper" v-if="loadDataSuccess && (!activities || activities.length <= 0)">
        <div class="no-data-message">
          该分类是空的耶，去看看别的吧
        </div>
        <div class="message-icon"></div>
      </div>
      <ul v-if="loadDataSuccess && activities && activities.length > 0">
        <li v-for="(active, index) in activities" class="active-item border-1px" @click="goDetail(active.jpid, active.jp_type, active.is_join)">
          <my-item :active="active" :islogin="islogin" @stopDanMu="stopDanMu" v-on:showDialogByType="join" v-on:listenToRefresh="refreshData"></my-item>
        </li>
      </ul>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import MyItem from './ActiveItem.vue'
  export default {
    data() {
      return {
        showJoined: false,
        dialogType: '0',
        curPos: 0,
        danmuTimer: null
      }
    },
    props: {
      activities: {
        type: Array
      },
      islogin: {
        type: String
      },
      loadDataSuccess: {
        type: Boolean
      },
      horselamp: {
        type: Array
      },
      topshow: {
        type: String
      },
      bannerUrl: {
        type:String
      }
    },

    mounted() {
      let vue = this
      setTimeout(function(){
        if (vue.horselamp && vue.horselamp.length > 0) {
          let i = 0;
          let danmuHeight = window.adaptive.remToPx(0.63)
          vue.danmuTimer = setInterval(function(){
            if (i < vue.horselamp.length){
              let bannerHeight = parseInt($('#danmu').css('height'))
              let h = Math.random()*(bannerHeight - danmuHeight)
              //console.log("bannerHeight:" + bannerHeight + ",h:" + h + ",curPos:" + vue.curPos)
              if (Math.abs(h - vue.curPos) <= danmuHeight + 10) {
                //console.log("需要修正")
                if (h >= vue.curPos) {
                  //console.log("h >= vue.curPos")
                  if (h + danmuHeight > bannerHeight - danmuHeight) {
                    h = vue.curPos - danmuHeight - 10;
                  } else　{
                    h = h + danmuHeight + 10;
                  }
                } else {
                  //console.log("h < vue.curPos")
                  if (h - danmuHeight < 0) {
                    h = vue.curPos + danmuHeight + 10;
                  } else　{
                    h = h - danmuHeight - 10;
                  }
                }
              }
              if (h < 20) {
                  h = 20
              } else if (h > bannerHeight - danmuHeight - 20) {
                h = bannerHeight - danmuHeight - 20;
              }

              vue.curPos = h;
              //console.log("修正以后：bannerHeight:" + bannerHeight + ",h:" + h + ",curPos:" + vue.curPos)
              vue.danmu(vue.horselamp[i], h)
              i++
            } else {
              clearInterval(vue.danmuTimer)
            }
          }, 1500)
        }
      }, 500)
    },
    methods: {
      goRankingList() {
          if (this.utils.supportWccia()) {
            this.utils.doClickTJ('click', 'pointraised','ranklist', '', '')
            this.utils.doRouter(this, '/ranking', { 'h5title': '排行榜'})
            this.stopDanMu()
          } else {
              this.join('5', '', '', '', '')
          }
      },
      danmu(text, h) {
        let $p = $('<div class="danmu-div">'+
          '<div class="danmu-header">'+
          '<div class="danmu-header-img"/>' +
          '</div>' +
          '<div class="danmu-text">'+ text +'</div>'+
          '</div>');
        let bannerWidth = parseInt($('#danmu').css('width'))
        $p.css({
          "top": window.adaptive.pxToRem(h) + 'rem',
          "left": bannerWidth
        });
        $('#danmu').append($p);
      },
      stopDanMu() {
        clearInterval(this.danmuTimer)
        let elements = document.getElementsByClassName('danmu-div');
        if (elements) {
          let size = elements.length;
          for (let i = size - 1; i >= 0; i--) {
            elements[i].parentNode.removeChild(elements[i])
          }
        }
      },
      goDetail(jpid, jptype, is_join) {
        let vue = this
        if (this.wccconfig.isApp) {
          if (this.utils.supportWccia()) {
            this.utils.doRouter(this, '/detail',{'jpid':jpid, 'h5title': '积分夺宝'})
          } else {
            //不支持openWebView,则提示下载更新
            this.$emit("listenToShowDialog", '6')
          }
          if (this.islogin === '0' || is_join === '0') {
            //如果是未登录，跳转详情页之前，增加页面显示刷新数据监听
            //如果支持visibilitychange事件监听，就用visibilitychange事件，如果不支持，就用定时器
            if (this.utils.supportVisibilityChange()) {
              let visibilityChange
              if (typeof document.hidden !== "undefined") {
                visibilityChange = "visibilitychange"
              } else if (typeof document.mozHidden !== "undefined") {
                visibilityChange = "mozvisibilitychange"
              } else if (typeof document.msHidden !== "undefined") {
                visibilityChange = "msvisibilitychange"
              } else if (typeof document.webkitHidden !== "undefined") {
                visibilityChange = "webkitvisibilitychange"
              }
              document.addEventListener(visibilityChange, function() {
                if (!document.hidden) {
                  if (vue.islogin === '0') {
                    if (vue.utils.supportGetNativeParameter()) {
                      vue.wccia.getNativeParameter(function(params){
                        if (params) {
                          if (typeof params === 'string') {
                            params = JSON.parse(params)
                          }
                          if (params.urid) {
                            vue.$emit("listenToRefreshForLogin", params.urid)
                          }
                        }
                      })
                    }
                  } else {
                    vue.$emit("listenToRefreshForLogin", vue.utils.getQueryString(location.href, 'urid'))
                  }
                }
              })
            } else {
              vue.timer = setInterval(function () {
                if (vue.islogin === '0') {
                  if (vue.utils.supportGetNativeParameter()) {
                    vue.wccia.getNativeParameter(function(params){
                      if (params) {
                        if (typeof params === 'string') {
                          params = JSON.parse(params)
                        }
                        if (params.urid) {
                          clearInterval(vue.timer)
                          vue.$emit("listenToRefreshForLogin", params.urid)
                        }
                      }
                    })
                  }
                } else {
                  // 不能定时请求接口，因为没有停止条件
                  //vue.$emit("listenToRefreshForLogin", vue.utils.getQueryString(location.href, ['urid']))
                }
              }, 1000)
            }
          }
        } else {
          if (jptype === '2' || jptype === '3') {
            this.utils.doRouter(this, '/detail',{'jpid':jpid, 'h5title': '积分夺宝'})
          }
        }
        this.stopDanMu()
      },
      join(type, shareTitle, shareContent, shareUrl, shareImgUrl) {
        this.$emit("listenToShowDialog", type, shareTitle, shareContent, shareUrl, shareImgUrl)
      },
      refreshData(urid) {
        this.$emit("listenToRefreshForLogin", urid)
      }
    },
    components: {
      MyItem
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl"
  @keyframes myfirst
  {
    0%   {left:100%;}
    100% {left:-100%;}
  }
  .active-list
    position relative
    .header-wrapper
      position relative
      width 100%
      height auto
      overflow hidden
      .ranking-list-warpper
        display block
        position absolute
        right .18rem
        top .2rem
        width 1.87rem
        height .65rem
        border-radius .1rem
        background-color: #fece3e
        border: solid .04rem #5d2529
        z-index 30
        .ranking-list-content
          height .65rem
          line-height .65rem
          font-family: STHeitiSC
          font-size: .393rem
          font-weight: 300
          color: #5d2529
      .danmu-div
        display block
        position  absolute
        white-space nowrap
        animation myfirst 6s linear 0s 1 alternate
        .danmu-header
          display inline-block
          position relative
          vertical-align bottom
          width .63rem
          height .63rem
          background-color #FE4A4A
          border-radius .33rem
          border .03rem solid #ffffff
          z-index 100
          .danmu-header-img
            display block
            width .45rem
            height .62rem
            margin-left .11rem
            margin-top .04rem
            background-size .45rem .62rem
            background-image url('./img/icon_danmu_header.png')
            z-index 100
        .danmu-text
          vertical-align bottom
          display inline-block
          position relative
          height .6rem
          line-height .6rem
          background-color #FE4A4A
          border-radius .4rem
          z-index 30
          color #f4fcff
          font-weight 700
          font-size .32rem
          padding 0 .2rem 0 .7rem
          margin-left -.62rem
          font-family STXihei
      .banner
        width 100%
        height auto
        background-color #000
    .content-wrapper
      background-size 100% 7.68rem
      background-repeat repeat-y
      background-color #ffffff
      min-height 7.68rem
      .no-data-wrapper
        padding-top .3rem
        .no-data-message
          font-size 0.3rem
          text-align center
          color rgb(72 47 53)
        .message-icon
          margin .2rem auto 0 auto
          width 2.8rem
          height 2.45rem
          background-size 2.8rem 2.45rem
          background-image url('./img/icon_no_data.png')
      .active-item
        position relative
        border-1px(rgba(7, 17, 27, 0.1))
</style>
